import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { v4 as uuidv4 } from 'uuid';
import styles from './VideoConference.module.css';
import authManager from '../../utils/auth';

const VideoConference: React.FC = () => {
  const navigate = useNavigate();
  const [roomId, setRoomId] = useState('');
  const [showJoinModal, setShowJoinModal] = useState(false);

  // 创建新会议（创建者为主持人）
  const handleCreateMeeting = () => {
    const newRoomId = uuidv4();
    // 传递 isHost=true 参数表示这是创建者
    navigate(`/admin/room/${newRoomId}?isHost=true`);
  };

  // 加入现有会议
  const handleJoinMeeting = () => {
    if (roomId.trim()) {
      navigate(`/admin/room/${roomId.trim()}`);
    } else {
      alert('请输入有效的会议ID');
    }
  };

  // 显示加入会议模态框
  const showJoinDialog = () => {
    setShowJoinModal(true);
  };

  // 关闭加入会议模态框
  const closeJoinDialog = () => {
    setShowJoinModal(false);
    setRoomId('');
  };

  // 处理回车键
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleJoinMeeting();
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.header}>
          <div className={styles.icon}>📹</div>
          <h1 className={styles.title}>多人视频会议</h1>
          <p className={styles.subtitle}>简单、高效的在线会议解决方案</p>
        </div>

        <div className={styles.actions}>
          <div className={styles.card}>
            <h2>开始会议</h2>
            <button
              className={`${styles.button} ${styles.primaryButton}`}
              onClick={handleCreateMeeting}
            >
              <span className={styles.buttonIcon}>🎥</span>
              创建新会议
            </button>
          </div>

          <div className={styles.card}>
            <h2>加入会议</h2>
            <button
              className={`${styles.button} ${styles.secondaryButton}`}
              onClick={showJoinDialog}
            >
              <span className={styles.buttonIcon}>🔗</span>
              加入现有会议
            </button>
          </div>
        </div>

        <div className={styles.features}>
          <div className={styles.feature}>
            <span className={styles.featureIcon}>🎤</span>
            <h3>高质量音视频</h3>
            <p>清晰流畅的音视频体验</p>
          </div>
          <div className={styles.feature}>
            <span className={styles.featureIcon}>💬</span>
            <h3>实时聊天</h3>
            <p>文字消息即时通讯</p>
          </div>
          <div className={styles.feature}>
            <span className={styles.featureIcon}>🖥️</span>
            <h3>屏幕共享</h3>
            <p>分享您的屏幕内容</p>
          </div>
          <div className={styles.feature}>
            <span className={styles.featureIcon}>👥</span>
            <h3>多人会议</h3>
            <p>支持多人同时参会</p>
          </div>
        </div>
      </div>

      {/* 加入会议模态框 */}
      {showJoinModal && (
        <div className={styles.modalOverlay} onClick={closeJoinDialog}>
          <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
            <div className={styles.modalHeader}>
              <h2>加入会议</h2>
              <button className={styles.closeButton} onClick={closeJoinDialog}>
                ×
              </button>
            </div>
            <div className={styles.modalBody}>
              <label htmlFor="roomId" className={styles.label}>
                会议 ID
              </label>
              <input
                id="roomId"
                type="text"
                className={styles.input}
                placeholder="请输入会议ID"
                value={roomId}
                onChange={(e) => setRoomId(e.target.value)}
                onKeyPress={handleKeyPress}
                autoFocus
              />
              <p className={styles.hint}>
                会议ID可以从会议链接中获取，或由主持人提供
              </p>
            </div>
            <div className={styles.modalFooter}>
              <button
                className={`${styles.button} ${styles.cancelButton}`}
                onClick={closeJoinDialog}
              >
                取消
              </button>
              <button
                className={`${styles.button} ${styles.primaryButton}`}
                onClick={handleJoinMeeting}
              >
                加入
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default VideoConference;
